<template>
    <div class="certification-result">
        <!-- 返回按钮 -->
        <div class="back-btn" @click="goBack">
            <van-icon name="arrow-left" size="20" color="#333"/>
        </div>

        <!-- 标题部分减小间距 -->
        <div class="title">
            <h1>猫咪品种认证</h1>
            <h2>KITTY CERTIFICATION</h2>
        </div>

        <!-- 主要内容区 -->
        <div class="content">
            <!-- 猫咪图片和基本信息 -->
            <div class="cat-info">
                <div class="cat-image">
                    <img :src="catImageUrl" alt="猫咪照片"/>
                </div>
                <div class="cat-details">
                    <div class="cat-name">
                        <label>爱称：</label>
                        <input 
                            v-if="isEditing" 
                            v-model="catName" 
                            @blur="isEditing = false"
                            placeholder="点击输入猫咪名字"
                        />
                        <span v-else @click="isEditing = true">{{ catName || '点击输入猫咪名字' }}</span>
                    </div>
                    <!-- 添加年龄输入 -->
                    <div class="cat-age">
                        <label>年龄：</label>
                        <input 
                            v-if="isEditingAge" 
                            v-model="catAge" 
                            @blur="isEditingAge = false"
                            placeholder="请输入猫咪年龄"
                        />
                        <span v-else @click="isEditingAge = true">{{ catAge  || '请输入猫咪年龄' }}</span>
                    </div>
                    <div class="breed-info">
                        <h3>血缘追溯品种：</h3>
                        <p>{{ mainBreed.zh }} {{ mainBreed.en }}</p>
                    </div>
                </div>
            </div>

            <!-- 品种占比饼图 -->
            <div class="breed-chart" ref="chartContainer"></div>

            <!-- 免责声明 -->
            <div class="disclaimer">
                该识别结果仅作参考，最终解释权归灵猫智问【FelixAI】所有
            </div>

            <!-- 下载按钮 -->
            <div class="download-btn" @click="downloadImage">
                <el-button type="primary" size="small">下载认证书</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import * as echarts from 'echarts'
import html2canvas from 'html2canvas'
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

const route = useRoute()
const router = useRouter()

// 从 query 中获取数据
const predictionData = ref(JSON.parse(route.query.predictionData || '[]'))
const catImageUrl = ref(route.query.imageUrl || '')
const catName = ref('')
const isEditing = ref(false)
const chartContainer = ref(null)
const catAge = ref('')
const isEditingAge = ref(false)

// 获取主要品种（概率最高的）
const mainBreed = computed(() => predictionData.value[0] || {})

// 初始化图表
const initChart = () => {
    const chart = echarts.init(chartContainer.value)
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal',
            bottom: '0%',
            itemWidth: 25,
            itemHeight: 14,
            textStyle: {
                fontSize: 12
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['25%', '70%'],
                center: ['50%', '45%'],
                startAngle: 90,
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{b}\n{d}%',
                    fontSize: 12,
                    lineHeight: 15
                },
                labelLine: {
                    show: true,
                    length: 10,
                    length2: 10
                },
                data: predictionData.value.map(item => ({
                    name: item.zh,
                    value: (item.probability * 100).toFixed(2)
                }))
            }
        ]
    }
    chart.setOption(option)
}

// 下载认证书
const downloadImage = async () => {
    const element = document.querySelector('.certification-result')
    const canvas = await html2canvas(element)
    const link = document.createElement('a')
    link.download = `${catName.value || '我的猫咪'}_认证书.png`
    link.href = canvas.toDataURL()
    link.click()
}

// 返回上一页
const goBack = () => {
    router.back()
}

onMounted(() => {
    initChart()
})
</script>

<style lang="scss" scoped>
.certification-result {
    width: 100%;
    min-height: 100vh;
    background-color: #faf6f1;
    padding: 10px; // 减小外边距
    position: relative;

    .back-btn {
        position: absolute;
        top: 10px;
        left: 10px;
        cursor: pointer;
    }

    .title {
        text-align: center;
        margin-bottom: 10px;
        padding-top: 20px;
        
        h1 {
            font-size: 20px; // 减小字体
            color: #333;
            margin-bottom: 2px;
        }
        
        h2 {
            font-size: 14px; // 减小字体
            color: #666;
            margin-top: 0;
        }
    }

    .content {
        width: 355px;
        margin: 0 auto;
        background: white;
        border-radius: 12px;
        padding: 20px 15px; // 增加上下内边距
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

        .cat-info {
            display: flex;
            gap: 15px;
            margin-bottom: 20px; // 增加底部间距
            padding: 0 10px; // 添加左右内边距

            .cat-image {
                width: 120px; // 减小图片尺寸
                height: 120px;
                overflow: hidden;
                border-radius: 8px;
                
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .cat-details {
                flex: 1;

                .cat-name, .cat-age {
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;
                    
                    label {
                        font-size: 14px;
                        color: #666;
                        margin-right: 8px;
                        white-space: nowrap; // 防止换行
                    }

                    input, span {
                        font-size: 14px;
                        padding: 2px;
                        border: none;
                        border-bottom: 1px dashed #ccc;
                        flex: 1;
                        &:focus {
                            outline: none;
                        }
                    }
                }

                .breed-info {
                    h3 {
                        color: #666;
                        margin-bottom: 4px;
                        font-size: 14px;
                    }
                    p {
                        font-size: 16px;
                        color: #333;
                    }
                }
            }
        }

        .breed-chart {
            height: 280px; // 增加图表高度
            margin: 15px 10px; // 添加左右边距
            padding: 10px;
            box-sizing: border-box;
            background-color: #fff;
        }

        .disclaimer {
            text-align: center;
            font-size: 10px;
            color: #999;
            margin: 20px 0 15px; // 调整上下边距
            padding: 0 10px; // 添加左右内边距
        }

        .download-btn {
            text-align: right;
            margin-top: 15px;
            padding: 0 10px; // 添加左右内边距
            
            .el-button {
                font-size: 12px;
                padding: 8px 15px;
                border-radius: 4px;
            }
        }
    }
}
</style> 